import React, {Component} from 'react';
import {Image, View} from '@tarojs/components'
import {AtTabs} from 'taro-ui'
import {RecordItem} from '../../utils/server.interface'
import {http} from '../../utils/http'
import {GET_RECORD, RESOURCE_URL} from '../../constants/api'
import {vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './rule.scss'

interface PageType {
  curTabIndex: number
  recordList: RecordItem[]
}

const tabs = [{title: '全部', value: -1}, {title: '提现', value: 4}, {title: '充值', value: 6}, {
  title: '返现',
  value: 2
}, {title: '消费', value: 7}]

export default class Record extends Component {
  state: PageType = {
    curTabIndex: 0,
    recordList: []
  }

  async onReachBottom() {
    this.page++
    const recordList: any = await this.getData(this.page)
    const old: any = this.state.recordList
    if (recordList) {
      this.setState({recordList: [...old, ...recordList]})
    }
  }

  tabChange(index) {
    this.page = 1
    this.setState({curTabIndex: index, recordList: []}, async () => {
      const recordList = await this.getData(this.page)
      this.setState({recordList})
    })
  }

  page = 1

  async componentDidShow() {
    vcmonitor(this)
    const recordList = await this.getData(this.page)
    this.setState({recordList})
  }

  async getData(page) {
    const index = this.state.curTabIndex
    return await http.get<RecordItem[]>(GET_RECORD, {pageNumber: page, typeStatus: tabs[index].value})
  }

  render() {
    const {curTabIndex, recordList} = this.state
    return (
      <View className='rule-page-root'>
        <GzhAuth />
        <AtTabs tabList={tabs} current={curTabIndex} onClick={this.tabChange.bind(this)}></AtTabs>
        {recordList.map((item: any, index) => <View className='item' key={index}>
          <View className='title'>{item.subject}
            <View className='time'>{item.add_date}</View>
            {item.alipay_no && <View className='alipay_no'>账号：{item.alipay_no}</View>}
            {item.pay_source_name && <View className='alipay_no'>来源：{item.pay_source_name}</View>}
            {(item.type == 2 || item.type == 7 || item.type == 5) && item.product_name &&
              <View className='m-t'>{item.product_name}</View>}
            {item.type == 2 && item.seller_real_name &&
              <View className='m-t'>{process.env.fxName}名称：{item.seller_real_name}</View>}
          </View>
          <View className={item.total_amount < 0 ? "total_amount" : "total_amount yellow"}>{item.total_amount}</View>
        </View>)}
        {recordList.length <= 0 && <View className='listNull' style='top: 20% !important;'>
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
          <View className='text'>什么都没有,去看看别的吧~</View>
        </View>}
      </View>
    )
  }
}
